<template>
	<view class="height-screen">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">{{$t('order.shopDetail')}}</block>
		</cu-custom>
		<view class="flex flex-direction padding-bottom-lg">
			<view class="flex flex-direction">
				<u-swiper :list="bannarList" :height="300" :indicator="true" indicatorMode="dot"></u-swiper>
				<view class="bg-white padding flex flex-direction">
					<text class="font-bold text-black text-lg one-line">{{shopInfo.name}}</text>
					<view class="margin-tb-sm flex align-center">
						<text class="margin-right-sm text-red text-lg font-bold">${{shopInfo.price}}</text>
						<text class="text-gray font-400 text-sm"
							style="text-decoration-line: line-through;">{{$t('order.supermarketPrice')}}:${{shopInfo.supermarket_price}}丨{{$t('order.marketPrice')}}:${{shopInfo.market_price}}</text>
					</view>
					<text
						class="text-gray font-400 text-sm">{{$t('home.mothSallNum')}}:{{shopInfo.total_sall_num}}</text>
				</view>
			</view>
			<view class="bg-white padding-lr-sm margin-top-sm">
				<view class="text-lg text-black font-bold padding-tb-sm u-border-bottom">{{$t('order.shopDetail')}}
				</view>
				<view class="padding-sm">
					<u-parse :content="shopInfo.content"></u-parse>
				</view>
			</view>
			<view class="bg-white padding-lr-sm margin-top-sm">
				<view class="text-lg text-black font-bold padding-tb-sm u-border-bottom">{{$t('order.buyNotice')}}
				</view>
				<view class="padding-tb-sm">
					<u-parse :content="xuzhi"></u-parse>
				</view>
			</view>
			<view class="bg-white padding-lr-sm margin-top-sm">
				<view class="padding-tb-sm u-border-bottom flex justify-between align-center">
					<text class="text-lg text-black font-bold">{{$t('order.orderComment')}}</text>
					<view class="flex align-center" @tap.stop="helper.routerNav('/pages/home/commentList',{id})">
						<text class="text-sm text-gray font-400"
							style="line-height: 30rpx;">{{$t('order.allComment')}}</text>
						<text class="cuIcon-right margin-left-xs" style="font-size: 28rpx;"></text>
					</view>
				</view>
				<view class="flex flex-direction padding-tb-sm" v-if="shopInfo.comment_info">
					<view class="flex align-center">
						<image :src="helper.handleImage(shopInfo.comment_info.avatar)"
							style="width: 90rpx;height: 90rpx;" class="round flex-shrink">
						</image>
						<view class="flex flex-direction margin-left-sm flex-sub">
							<view class="flex align-center justify-between ">
								<text class="font-400 text-black"
									style="font-size: 30rpx">{{shopInfo.comment_info.nickname}}</text>
								<u-rate :count="5" v-model="shopInfo.comment_info.score" readonly activeColor="#F4AA2A"
									gutter="1" size="16" />
							</view>
							<text
								class="font-400 text-gray text-sm margin-top-xs">{{shopInfo.comment_info.createtime | handleDateTime('YYYY-MM-DD')}}</text>
						</view>
					</view>
					<text class="text-df font-400 text-black margin-tb-sm">{{shopInfo.comment_info.remark}}</text>
				</view>
			</view>
		</view>
		<u-gap height="80" bgColor="#f1f1f1"></u-gap>
		<view class="flex flex-direction bg-white" style="position: fixed;bottom: 0;">
			<view class="flex justify-between align-center padding-lr-sm" style="height: 100rpx;width: 100vw;">
				<view class="flex align-center justify-around basis-xs">
					<view class="flex flex-direction align-center">
						<image src="@/static/img/collect.png" style="width: 35rpx;height: 33rpx;"
							v-if="shopInfo.collect_status==0" @tap.stop="handleLike(0)" />
						<image src="@/static/img/collectActive.png" style="width: 35rpx;height: 33rpx;" v-else
							@tap.stop="handleLike(1)" />
						<text class="font-400 text-sm text-black margin-top-xs">{{$t('order.collect')}}</text>
					</view>
					<view class="flex flex-direction align-center" @tap.stop="handleGoCar">
						<image src="@/static/img/shopCar.png" style="width: 40rpx;height: 40rpx;"></image>
						<text class="font-400 text-sm text-black margin-top-xs">{{$t('tabBar.car')}}</text>
					</view>
				</view>
				<view class="flex flex-sub">
					<view class="setButton flex-sub" @tap.stop="cartAdd"
						style="height: 72rpx;border: 2rpx solid #06C168;border-radius: 36rpx;">
						<text class="text-df font-400" style="color: #06C168;">{{$t('order.addCar')}}</text>
					</view>
					<view class="setButton flex-sub margin-left" @tap.stop="handleCar"
						style="height: 72rpx;background: #06C168;border-radius: 36rpx;">
						<text class="text-df text-white font-400">{{$t('order.addBuy')}}</text>
					</view>
				</view>
			</view>
			<u-safe-bottom />
		</view>
		<u-popup :show="buyShow" mode="bottom" :round="20" @close="close">
			<view class="flex flex-direction padding-tb" style="margin: 0 25rpx;">
				<view class="flex justify-between margin-tb align-center">
					<text class="font-400" style="font-size: 30rpx;color: #000000;">{{$t('filed.shuliang')}}</text>
					<u-number-box v-model="value" integer bgColor="#ffffff">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12"></u-icon>
						</view>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
				<view class="setButton" style="height: 72rpx;background: #06C168;border-radius: 36rpx;"
					@tap.stop="handleBuy">
					<text class="text-df text-white font-400">{{$t('order.addCar')}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goods_info,
		goumaixuzhi,
		cartAdd,
		goods_collect,
		goods_collect_del
	} from '@/apis'
	export default {
		data() {
			return {
				bannarList: [],
				shopInfo: {
					comment_info: {}
				},
				star: 3,
				id: null,
				xuzhi: '',
				buyShow: false,
				value: 1
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			let status = uni.getStorageSync('status')
			if (status != 'waitLoading') {
				this.goods_info()
				this.goumaixuzhi()
			} else {
				uni.removeStorageSync('status')
			}
		},
		methods: {
			async goods_info() {
				const res = await goods_info({
					id: this.id
				})
				this.bannarList = []
				res.images.split(',').forEach(item => {
					this.bannarList.push(this.helper.handleImage(item))
				})
				this.shopInfo = res
				uni.hideLoading();
			},
			async goumaixuzhi() {
				const res = await goumaixuzhi()
				this.xuzhi = res

				uni.hideLoading();
			},
			handleGoCar() {
				uni.reLaunch({
					url: '/pages/tabBar/car'
				})
			},
			handleCar() {
				this.buyShow = true
			},
			close() {
				this.buyShow = false
			},
			async cartAdd(id) {
				await cartAdd({
					goods_id: this.id,

				})
				this.helper.showToast(this.$t('message.success'))
			},
			async handleLike(isDel) {
				if (isDel == 0) {
					await goods_collect({
						goods_id: this.id
					})
				} else {
					await goods_collect_del({
						goods_id: this.id
					})
				}
				this.shopInfo.collect_status = this.shopInfo.collect_status == 0 ? 1 : 0
			},
			handleBuy() {
				this.buyShow = false
				this.helper.routerNav('/pages/home/confirmOrder', {
					goods_ids: JSON.stringify([{
						goods_id: this.id,
						num: this.value
					}])
				})
				this.value = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 0;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>